// import Tools from "@/components/ImageMaskEditor/tools";
import { EditorMode, ImageEditorRef } from "@/components/ImageMaskEditor/type";
import { useEditorTools } from "@/components/ImageMaskEditor/useEditorTools";
import { ZoomControlPanel } from "@/components/Tools/ZoomControlPanel";
import dynamic from "next/dynamic";
import { useEffect, useRef } from "react";

const ImageEditor = dynamic(() => import("@/components/ImageMaskEditor"), {
  ssr: false,
});

const modeMap: Record<EditorMode, string> = {
  [EditorMode.View]: "查看",
  [EditorMode.DrawLine]: "涂抹",
  [EditorMode.Erase]: "擦除",
  [EditorMode.FrameSelect]: "框选",
};
export default function Home() {
  const {
    mode,
    editorProps,
    setMode,
    lineWidth,
    setLineWidth,
    scale,
    setScale,
    undo,
    redo,
    toggleReverse,
    editorRef,
  } = useEditorTools();

  return (
    <main className='flex min-h-screen flex-col items-center justify-center p-24'>
      <div className='w-full max-w-5xl'>
        <h1 className='text-2xl font-bold mb-8'>Zoom Control Demo</h1>

        <div className='h-20 flex'>
          <div>
            <button
              className='bg-red-400 mr-2'
              onClick={() => setMode(EditorMode.View)}
            >
              视图
            </button>
            <button
              className='bg-red-400 mr-2'
              onClick={() => setMode(EditorMode.DrawLine)}
            >
              涂抹
            </button>
            <button
              className='bg-red-400 mr-2'
              onClick={() => setMode(EditorMode.Erase)}
            >
              擦除
            </button>
            <button className='bg-red-400 mr-2' onClick={() => undo()}>
              撤销
            </button>
            <button className='bg-red-400 mr-2' onClick={() => redo()}>
              重做
            </button>
            <button
              className='bg-red-400 mr-2'
              onClick={() => {
                setMode(EditorMode.FrameSelect);
              }}
            >
              框选
            </button>
            <button
              className='bg-red-400 mr-2'
              onClick={() => {
                editorRef.current?.getProcessedImage().then((url) => {
                  if (url.trimImg) {
                    const a = document.createElement("a");
                    a.href = url.trimImg;
                    a.download = "image.png";
                    a.click();
                  }
                });
              }}
            >
              下载图片
            </button>
            <button
              className='bg-red-400 mr-2'
              onClick={() => {
                toggleReverse();
              }}
            >
              反转
            </button>

            {(mode === EditorMode.DrawLine || mode === EditorMode.Erase) && (
              <div className='flex'>
                {/* 控制画笔大小 */}
                <label className='text-amber-950' htmlFor='strokeWidth'>
                  画笔大小：{lineWidth}
                </label>
                <input
                  type='range'
                  id='strokeWidth'
                  name='strokeWidth'
                  min='1'
                  max='100'
                  value={lineWidth}
                  onChange={(e) => setLineWidth(Number(e.target.value))}
                />
              </div>
            )}

            <div>
              <label className='text-amber-950' htmlFor='scale'>
                放大缩小{Math.floor(scale * 100)}%
              </label>
              <input
                type='range'
                id='scale'
                name='scale'
                min='1'
                max='100'
                value={scale * 100}
                onChange={(e) => setScale(Number(e.target.value) / 100)}
              />
            </div>
          </div>

          {/* 当前状态 */}
          <div className='ml-2 text-amber-950'>
            <span>当前状态：</span>
            <span className='ml-2'>{modeMap[mode]}</span>
          </div>
        </div>
        <div className='flex flex-col items-center gap-8'>
          <div className='w-full h-[400px] border border-gray-200 rounded-lg flex items-center justify-center bg-gray-50'>
            <ImageEditor
              {...editorProps}
              maskImgUrl='/demo2_mask.jpg'
              imgUrl='/demo2.png'
            />
          </div>

          <ZoomControlPanel
            onZoomChange={(zoom) => console.log(`Zoom changed to ${zoom}%`)}
          />
        </div>
      </div>
    </main>
  );
}